<template>
  <el-row>
    <el-row>
      <el-col>
        <h1>生成计划班表</h1>
      </el-col>
      <el-col :span="24">
        <steps :imp-steps="impSteps" :active="active"></steps>
      </el-col>
    </el-row>
    <el-row class="showRow" v-show="active === 0">
      <el-col :span="8" :offset="8">
        <el-upload
          class="upload-demo"
          ref="upload"
          name="uploadFile"
          action="/baseSchedule/upload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :on-progress="onLoading"
          :on-success="onSuccess"
          :on-error="onError"
          v-loading="loading"
          element-loading-text="正在导入基础班表"
          element-loading-spinner="el-icon-loading"
        >
          <el-button slot="trigger" size="medium" type="primary">上传基础班表</el-button>
          <el-button size="mini" @click="next">略过</el-button>
        </el-upload>
        <el-link icon="el-icon-tickets" href="/download/基础班表导入模板.xls" type="primary">模板下载</el-link>
        <br />
        <el-link icon="el-icon-tickets" href="/download/营销班表转换系统模板.xls" type="primary">班表转换工具下载</el-link>
      </el-col>
    </el-row>
    <el-row v-if="active === 1" class="showRow" type="flex" justify="space-around">
      <form-componet :form-label="formModelLabel" :form-model="formModel" :label-position="labelPosition" label-width="120px">
        <template>
          <el-button @click="previous" type="info" icon="el-icon-arrow-left">
            上一步
          </el-button>
          <el-button @click="next">
            下一步
            <i class="el-icon-arrow-right" />
          </el-button>
        </template>
      </form-componet>
    </el-row>
    <el-row
      v-show="active === 2"
      type="flex"
      justify="center"
      v-loading.fullscreen.lock="loading"
      element-loading-text="生成班表中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>确认信息</span>
        </div>
        <div class="text item">
          {{ "基础班表日期：" + formModel.baseScheduleRelease[0] }}
        </div>
        <div class="text item">
          {{ "基础班表版本：" + formModel.baseScheduleRelease[1] }}
        </div>
        <div class="text item">
          {{ "班表生效日期：" + formModel.dateList[0] }}
        </div>
        <div class="text item">
          {{ "班表结束日期：" + formModel.dateList[1] }}
        </div>
        <el-button @click="previous" type="info" icon="el-icon-arrow-left">
          上一步
        </el-button>
        <el-button @click.prevent="onsubmit" type="primary">
          提交
        </el-button>
      </el-card>
    </el-row>
    <el-row
      v-show="active === 3"
      type="flex"
      justify="center"
      v-loading.fullscreen.lock="loading"
      element-loading-text="生成班表中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>班表转换成功!</span>
        </div>
        <div class="text item">
          {{ "基础班表日期：" + formModel.baseScheduleRelease[0] }}
        </div>
        <div class="text item">
          {{ "基础班表版本：" + formModel.baseScheduleRelease[1] }}
        </div>
        <div class="text item">
          {{ "班表生效日期：" + formModel.dateList[0] }}
        </div>
        <div class="text item">
          {{ "班表结束日期：" + formModel.dateList[1] }}
        </div>
        <el-button @click="next" plain type="primary">
          再来一单
        </el-button>
        <el-button @click="download" plain type="primary">
          导出班表
        </el-button>
      </el-card>
    </el-row>
  </el-row>
</template>

<script>
import Steps from "../../components/Steps";
import FormComponet from "../../components/FormComponet";

export default {
  name: "BaseScheduleImp",
  components: {
    Steps,
    FormComponet
    //延迟加载组件
    // TableComponet: () => import("../../components/TableComponet")
  },
  data() {
    return {
      loading: false,
      labelPosition: "top",
      active: 0,
      fileList: [],
      tableLabel: ["基础班表导入日期", "班表版本", "班表生效日期", "班表结束日期"],
      impSteps: [
        {
          title: "步骤一",
          description: "导入基础班表"
        },
        {
          title: "步骤二",
          description: "选择班表版本及期间"
        },
        {
          title: "步骤三",
          description: "确认信息"
        }
      ],
      formModel: {
        baseScheduleRelease: [],
        dateList: []
      },
      formModelLabel: [
        {
          model: "baseScheduleRelease",
          name: "请选择基础班表的版本",
          type: "select",
          opts: []
        },
        {
          model: "dateList",
          type: "datePickerList",
          name: "请选择班表生效日期"
        }
      ]
    };
  },
  mounted() {
    this.getOpts();
  },
  methods: {
    next() {
      if (this.active++ > this.impSteps.length - 1) this.active = 0;
    },
    previous() {
      if (this.active-- < 0) this.active = 0;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    onLoading() {
      this.loading = true;
    },
    onError(err) {
      this.loading = false;
      this.$alert(err, "上传失败", { dangerouslyUseHTMLString: true });
    },
    onSuccess() {
      this.getOpts();
      this.loading = false;
      this.$alert("文件上传成功", "成功", {
        type: "success",
        confirmButtonText: "确定",
        callback: () => {
          this.next();
        }
      });
    },
    getOpts() {
      this.$http.get("/baseSchedule/getOpts").then(res => (this.formModelLabel[0].opts = res.data.opts));
    },
    onsubmit() {
      this.onLoading();
      this.$http
        .post("/baseSchedule/sceduleSubmit", this.formModel)
        .then(res => {
          this.loading = false;
          this.next();
          this.$notify({
            title: "成功",
            message: res.data.message,
            type: "success"
          });
        })
        .catch(err => {
          this.loading = false;
          this.$alert(err, "失败");
        });
    },
    download() {
      window.open("/schedule/scheduleEmp?sDate=" + this.formModel.dateList[0] + "&eDate=" + this.formModel.dateList[1], "_parent");
    }
  }
};
</script>

<style lang="scss" scoped>
.showRow {
  margin-top: 30px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.box-card {
  width: 480px;
}
</style>
